<script setup lang="ts">
import type {  Props } from './utils/types'

defineOptions({
    name: 'CooperativeBrands'
})

defineProps<Props>()

</script>

<template>
    <div class="cooperative-brands">
        <el-empty class="empty" description="暂无内容" v-if="parentList.length == 0" :image-size="82" />
        <div class="cooperative-brands-content">
            <div class="item" v-for="item in parentList" :key="item.id">
                <a :href="item.brand_href" target="_blank">
                    <div class="cooperative-logo">
                        <img :src="item.color_icon" :alt="item.name">
                    </div>
                    <div class="cooperative-text">{{ item.name }}</div>
                </a>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.cooperative-brands {
    border-top: 1px dashed rgb(187, 187, 187);

    .cooperative-brands-content {
        margin-top: 18px;
        display: flex;
        justify-content: space-around;
        margin-bottom: 20px;

        .item {
            cursor: pointer;

            a {
                text-decoration: none;
            }

            &:hover {
                .cooperative-logo {
                    filter: grayscale(0%);
                }

                .cooperative-text {
                    color: #3894FF;
                }
            }

            .cooperative-logo {
                text-align: center;
                height: 39px;
                color: #9e9e9e;
                filter: grayscale(100%);
                transition: all .2s;

                img {
                    height: 39px;
                }
            }

            .cooperative-text {
                color: rgba(154, 154, 154, 1);
                font-size: 14px;
                text-align: center;
                margin-top: 20px;
                transition: all .2s;
                cursor: pointer;
            }
        }
    }
}
</style>